<template>
  <div>
    <todo-list>
      <!-- 尽量 不使用 index 作为 key -->
      <todo-item
        @del="del"
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        :del="item.del"
      >
        <!-- 
          插槽是传递复杂内容的一种方式
          作用域插槽 => 本质上是一个返回组件的函数
        -->
        <!-- 具名插槽 -->
        <!-- Vue2.5语法 -->
        <!-- <span slot="pre-icon">前置图标</span>
        <span slot="suf-icon">后置图标</span>-->
        <!-- Vue2.6 具名插槽、作用域插槽 -->
        <template v-slot:pre-icon="{ value }">
          <span>{{ value }}前置图标</span>
        </template>
        <template v-slot:suf-icon>
          <span>后置图标</span>
        </template>
      </todo-item>
    </todo-list>
  </div>
</template>

<script>
import TodoList from "@/components/TodoList.vue";
import TodoItem from "@/components/TodoItem.vue";

export default {
  components: {
    TodoList,
    TodoItem,
  },
  data() {
    return {
      list: [
        {
          title: "Kobe",
          del: false,
        },
        {
          title: "James",
          del: true,
        },
        {
          title: "Alomy",
          del: false,
        },
      ],
    };
  },
  methods: {
    del(val) {
      console.log(val);
    },
  },
};
</script>
